<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useContainerStore } from '../stores/containerStore'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const router = useRouter()
const containerStore = useContainerStore()

// 当前活动的容器
const activeContainer = computed(() => containerStore.activeContainer)

// 评估表单
const evaluationForm = ref({
  effectivenessScore: 3, // 默认3星
  positiveTags: [],
  negativeTags: [],
  notes: ''
})

// 正向标签选项
const positiveTagOptions = [
  { label: '方法得当', value: '#方法得当' },
  { label: '高度专注', value: '#高度专注' },
  { label: '灵感迸发', value: '#灵感迸发' },
  { label: '突破难点', value: '#突破难点' },
  { label: '环境良好', value: '#环境良好' },
  { label: '精力充沛', value: '#精力充沛' },
  { label: '番茄工作法', value: '#番茄工作法' },
  { label: '计划合理', value: '#计划合理' }
]

// 负向标签选项
const negativeTagOptions = [
  { label: '准备不足', value: '#准备不足' },
  { label: '频繁被打断', value: '#频繁被打断' },
  { label: '方法错误', value: '#方法错误' },
  { label: '精力不济', value: '#精力不济' },
  { label: '环境干扰', value: '#环境干扰' },
  { label: '目标不明确', value: '#目标不明确' },
  { label: '拖延症发作', value: '#拖延症发作' },
  { label: '技能欠缺', value: '#技能欠缺' }
]

// 自定义标签输入
const customPositiveTag = ref('')
const customNegativeTag = ref('')

// 添加自定义正向标签
function addCustomPositiveTag() {
  if (customPositiveTag.value && !customPositiveTag.value.startsWith('#')) {
    const newTag = `#${customPositiveTag.value}`
    if (!evaluationForm.value.positiveTags.includes(newTag)) {
      evaluationForm.value.positiveTags.push(newTag)
    }
    customPositiveTag.value = ''
  }
}

// 添加自定义负向标签
function addCustomNegativeTag() {
  if (customNegativeTag.value && !customNegativeTag.value.startsWith('#')) {
    const newTag = `#${customNegativeTag.value}`
    if (!evaluationForm.value.negativeTags.includes(newTag)) {
      evaluationForm.value.negativeTags.push(newTag)
    }
    customNegativeTag.value = ''
  }
}

// 提交评估
function submitEvaluation() {
  if (!activeContainer.value) {
    ElMessage.warning('没有活动中的时间容器')
    return
  }
  
  containerStore.endContainer(activeContainer.value.id, evaluationForm.value)
  ElMessage.success('评估已提交')
  router.push('/insights')
}

// 计算时间差异
const timeDifference = computed(() => {
  if (!activeContainer.value || !activeContainer.value.startTime) return null
  
  const startTime = dayjs(activeContainer.value.startTime)
  const now = dayjs()
  const diffMinutes = now.diff(startTime, 'minute')
  const estimatedTime = activeContainer.value.estimatedTime
  
  return {
    actual: diffMinutes,
    estimated: estimatedTime,
    difference: diffMinutes - estimatedTime,
    isOvertime: diffMinutes > estimatedTime
  }
})

// 检查是否有活动容器
onMounted(() => {
  if (!activeContainer.value) {
    ElMessage.warning('没有活动中的时间容器，请先创建一个')
    router.push('/container')
  }
})
</script>

<template>
  <div class="evaluation-view" v-if="activeContainer">
    <h1>经验价值评估</h1>
    
    <el-card class="evaluation-card">
      <template #header>
        <div class="card-header">
          <h2>{{ activeContainer.title }}</h2>
          <el-tag>{{ activeContainer.category }}</el-tag>
        </div>
      </template>
      
      <!-- 时间信息 -->
      <div class="time-info">
        <div class="time-comparison">
          <div class="time-item">
            <div class="time-label">预估时间</div>
            <div class="time-value">{{ activeContainer.estimatedTime }}分钟</div>
          </div>
          
          <div class="time-divider">vs</div>
          
          <div class="time-item">
            <div class="time-label">实际耗时</div>
            <div class="time-value" :class="{ 'overtime': timeDifference.isOvertime }">
              {{ timeDifference.actual }}分钟
            </div>
          </div>
          
          <div class="time-difference" :class="{ 'overtime': timeDifference.isOvertime }">
            <el-icon v-if="timeDifference.isOvertime"><ArrowUp /></el-icon>
            <el-icon v-else><ArrowDown /></el-icon>
            {{ Math.abs(timeDifference.difference) }}分钟
          </div>
        </div>
      </div>
      
      <!-- 评估表单 -->
      <el-form :model="evaluationForm" label-position="top">
        <!-- 行为效果评估 -->
        <div class="evaluation-section">
          <h3>行为效果评估</h3>
          <div class="section-subtitle">刚才的行为，对你达成最终目标的有效性如何？</div>
          
          <div class="rating-container">
            <el-rate 
              v-model="evaluationForm.effectivenessScore"
              :colors="['#F56C6C', '#E6A23C', '#67C23A']"
              :texts="['几乎无效', '效果较差', '一般效果', '效果良好', '非常有效']"
              show-text
              :max="5"
            />
          </div>
        </div>
        
        <!-- 原因分析 -->
        <div class="evaluation-section">
          <h3>原因分析</h3>
          <div class="section-subtitle">为什么是这个分数？</div>
          
          <div class="tags-section">
            <div class="positive-tags">
              <h4>正向因素</h4>
              <el-select
                v-model="evaluationForm.positiveTags"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="选择或创建正向标签"
                style="width: 100%"
              >
                <el-option
                  v-for="item in positiveTagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              
              <div class="custom-tag-input">
                <el-input 
                  v-model="customPositiveTag" 
                  placeholder="添加自定义正向标签" 
                  @keyup.enter="addCustomPositiveTag"
                >
                  <template #append>
                    <el-button @click="addCustomPositiveTag">添加</el-button>
                  </template>
                </el-input>
              </div>
            </div>
            
            <div class="negative-tags">
              <h4>负向因素</h4>
              <el-select
                v-model="evaluationForm.negativeTags"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="选择或创建负向标签"
                style="width: 100%"
              >
                <el-option
                  v-for="item in negativeTagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              
              <div class="custom-tag-input">
                <el-input 
                  v-model="customNegativeTag" 
                  placeholder="添加自定义负向标签" 
                  @keyup.enter="addCustomNegativeTag"
                >
                  <template #append>
                    <el-button @click="addCustomNegativeTag">添加</el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 经验沉淀 -->
        <div class="evaluation-section">
          <h3>经验沉淀</h3>
          <div class="section-subtitle">有哪些「行为变化」或「新思考」值得保留？</div>
          
          <el-input
            v-model="evaluationForm.notes"
            type="textarea"
            :rows="4"
            placeholder="记录你的洞察和心得..."
          />
        </div>
        
        <div class="form-actions">
          <el-button type="primary" @click="submitEvaluation">提交评估</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.evaluation-view {
  max-width: 800px;
  margin: 0 auto;
}

.evaluation-view h1 {
  margin-bottom: 30px;
  text-align: center;
  color: #303133;
}

.evaluation-card {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.time-info {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.time-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-item {
  text-align: center;
  flex: 1;
}

.time-label {
  font-size: 0.9rem;
  color: #909399;
  margin-bottom: 5px;
}

.time-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #303133;
}

.time-value.overtime {
  color: #F56C6C;
}

.time-divider {
  margin: 0 20px;
  color: #909399;
  font-weight: bold;
}

.time-difference {
  display: flex;
  align-items: center;
  background-color: #67C23A;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
}

.time-difference.overtime {
  background-color: #F56C6C;
}

.time-difference .el-icon {
  margin-right: 5px;
}

.evaluation-section {
  margin-bottom: 30px;
}

.evaluation-section h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #303133;
}

.section-subtitle {
  color: #909399;
  margin-bottom: 20px;
}

.rating-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.tags-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.positive-tags h4,
.negative-tags h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.custom-tag-input {
  margin-top: 10px;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>